<template>
  <div style="height:100%">
    <title-bar
      titleText="扣款顺序"
      :needBorder="true"
    >
      <i
        slot="right"
        class="icon iconfont icon-explain"
        @click="jumpToDescPage"
      ></i>
    </title-bar>
    <div
      style="
      overflow:scroll"
      class="dgwrapper"
    >
      <div class="flex-h flex-vc flex-hsb title-wrapper">
        <span>扣款顺序</span>
        <span>拖动切换顺序</span>
      </div>
      <draggable
        style="background:#fff"
        ref="draggable"
        v-model="dataList"
        @end="end"
        v-bind="options"
        v-if="loaded"
      >

        <template v-for="(item, index) in dataList">
          <payment-info
            :paymentInfo="item"
            :key="index"
            :add-border="index!== 0"
            :show-balance="showBalance"
          />
        </template>
      </draggable>
      <data-error
        v-else
        @retry="refresh"
      />
    </div>
  </div>
</template>

<script>
import TitleBar from '@/components/titlebar/TitleBar'
import draggable from 'vuedraggable'
import { getPaymentOrderList, getPaymentOrderListByCard, updatePaymentOrderList } from './api/api.js'
import PaymentInfo from './components/PaymentInfo'
import DataError from './components/DataError'
import { getUrlParamByKey } from 'vue-xiaobu-utils'
import { Indicator } from 'mint-ui'
import 'mint-ui/lib/indicator/style.css'
import 'mint-ui/lib/spinner/style.css'
import { open } from '@/utils/JumpUtils.js'

export default {
  name: 'App',
  components: {
    draggable,
    'payment-info': PaymentInfo,
    'data-error': DataError,
    'title-bar': TitleBar
  },
  data() {
    return {
      options: {
        animation: 100,
        // 可以修复4.4的手机拖动的样式
        fallbackOnBody: true
      },
      dataList: [],
      loaded: true,
      showBalance: false
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    end: async function (evt) {
      // 当支付列表长度小于2时，移动不发送协议
      if (this.dataList.length < 2) {
        return
      }
      try {
        Indicator.open({
          text: '保存中…',
          spinnerType: 'fading-circle'
        })
        await updatePaymentOrderList(this.dataList)
        Indicator.close()
        this.$toastMsg('变更扣款顺序成功！')
      } catch (err) {
        Indicator.close()
        this.$toastMsg('变更扣款顺序失败！')
        this.refresh()
      }
    },
    _getPaymentOrderList: async function () {
      try {
        Indicator.open({
          text: '加载中…',
          spinnerType: 'fading-circle'
        })
        this.dataList = await getPaymentOrderList()
        Indicator.close()
        this.loaded = true
      } catch (err) {
        Indicator.close()
        this.loaded = false
      }
    },
    _getPaymentOrderListByCard: async function () {
      try {
        Indicator.open({
          text: '加载中…',
          spinnerType: 'fading-circle'
        })
        this.dataList = await getPaymentOrderListByCard(getUrlParamByKey('cardinstanceid'), getUrlParamByKey('cardtype'))
        Indicator.close()
        this.loaded = true
      } catch (err) {
        Indicator.close()
        this.loaded = false
      }
    },
    refresh() {
      if (getUrlParamByKey('cardinstanceid')) {
        this.showBalance = true
        this._getPaymentOrderListByCard()
      } else {
        this.showBalance = false
        this._getPaymentOrderList()
      }
    },
    jumpToDescPage() {
      open('http://static.xiaobu.hk/apppages/changzx/deduction_guide.html')
    }
  }
}
</script>

<style>
.mint-indicator-wrapper {
  background: rgba(0, 0, 0, 0.5) !important;
}

html,
body {
  background: #f2f5f6;
}

.sortable-chosen {
  background-color: #dedede;
}

* {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
}
/* 设置滚动条的样式为0 */
.dgwrapper::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.icon-explain {
  width: 98px;
  height: 98px;
  text-align: center;
  position: absolute;
  right: 0;
  font-size: 20px; /*no*/
}

input {
  -webkit-user-select: auto; /*webkit浏览器*/
}

textarea {
  -webkit-user-select: auto; /*webkit浏览器*/
}
/* 标题栏包裹层 */
.title-wrapper {
  width: 750px;
  height: 90px;
}
/* 标题栏第一个内容 */
.title-wrapper span:first-of-type {
  margin-left: 30px;
  color: #333;
  font-size: 13px; /*no*/
  line-height: 18px; /*no*/
}
/* 标题栏第二个内容 */
.title-wrapper span:nth-of-type(2) {
  margin-right: 30px;
  color: #666;
  font-size: 14px; /*no*/
  line-height: 18px; /*no*/
}
</style>
